<template>
  <div id="app">
    <div class="category">
      <Category :data="films" title="电影">
        <img slot="center" src="https://scpic.chinaz.net/files/pic/pic9/202203/apic39908.jpg" alt="" class="img">
        <a slot="footer" href="https://www.jianshu.com/p/75a7db26d1d7">点我跳转</a>
      </Category>
      <Category :data="games" title="游戏">
        <ul slot="center">
          <li v-for="(item,index) in games" :key="index">{{ item }}</li>
        </ul>
        <a slot="footer" href="https://www.jianshu.com/p/75a7db26d1d7">点我跳转</a>
        <a slot="footer" href="https://www.jianshu.com/p/75a7db26d1d7">点我跳转</a>
      </Category>
      <Category :data="foods" title="美食">
        <video slot="center" src="https://www.w3school.com.cn/example/html5/mov_bbb.mp4" controls class="video"></video>
        <!-- 指定slot -->
        <template v-slot:footer>
          <div>
            <a href="https://www.jianshu.com/p/75a7db26d1d7">点我跳转</a>
            <a href="https://www.jianshu.com/p/75a7db26d1d7">点我跳转</a>
          </div>
        </template>
      </Category>
    </div>

    <div style="width: 100%;height: 200px"></div>

    <div class="newCategory">
      <Category2>
        <template v-slot="{names}">
          <ul>
            <li v-for="(item,index) in names" :key="index">{{ item }}</li>
          </ul>
        </template>
      </Category2>
      <Category2>
        <template v-slot="{names}">
          <li v-for="(item,index) in names" :key="index">{{ item }}</li>
        </template>
      </Category2>
      <Category2>
        <template v-slot="{names}">
          <h4 v-for="(item,index) in names" :key="index">{{ item }}</h4>
        </template>
      </Category2>
    </div>
  </div>
</template>

<script>
import Category from './components/Category'
import Category2 from './components/Category2'

export default {
  name: 'App',
  components: {
    Category, Category2
  },
  data() {
    return {
      foods: ['米饭', '火锅', '麻辣烫', '串串'],
      games: ['lol', '吃鸡', '手游', '问道'],
      films: ['喜羊羊与灰太狼', '第一滴血', '穿越火线', '斗破苍穹'],
    }
  }
}
</script>

<style>
#app {
}

.category {
  display: flex;
  justify-content: space-around;
}

.img {
  width: 100%;
  height: 200px;
}

.video {
  width: 100%;
}

.newCategory {
  display: flex;
  justify-content: space-around;
}
</style>
